import React from 'react';

interface Props {
  totalRows: number;
  pageSize: number;
  currentPage: number;
  onChangePage: (page: number) => void;
}

export default function MiniPagerMap({
  totalRows,
  pageSize,
  currentPage,
  onChangePage,
}: Props) {
  const totalPages = Math.ceil(totalRows / pageSize);

  return (
    <div
      style={{
        position: 'absolute',
        bottom: 70,
        right: 10,
        zIndex: 10,
        background: '#fff',
        border: '1px solid #ccc',
        borderRadius: 4,
        padding: 8,
        width: 180,
      }}
    >
      <div style={{ fontSize: 12, marginBottom: 4 }}>缩略图 / 页码</div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(10, 1fr)',
          gap: 2,
        }}
      >
        {Array.from({ length: totalPages }).map((_, p) => (
          <div
            key={p}
            title={`第 ${p + 1} 页`}
            style={{
              width: 14,
              height: 14,
              background: p === currentPage ? '#ff5722' : '#ddd',
              cursor: 'pointer',
              borderRadius: 2,
            }}
            onClick={() => onChangePage(p)}
          />
        ))}
      </div>
    </div>
  );
}